第 5 节 函数和作用域大纲
前言: 完成以下练习
编写代码:计算 1-100 相加并输出结果, 计算 1-200 相加,并输出结果, 计算 1-300 相加,并输出结果
没学函数前, 我们可能会写三遍 for 循环, 有了函数之后只需要写一遍即可.
(一)函数的声明函数的调用
函数就是封装(打包)多行函数, 元素函数就是运行函数封装的多行代码
- 函数声明和调用
- 对象中的函数(方法), alert 就是 window 对象的一个方法
- 函数和变量声明提前
- 函数表达式
(1)函数的声明和调用
<script>
// 需求1: 写一个函数,实现1到100相加
function sum() {
var num = 0;
for (var i=1;i<=100;i++) {
num += i;
}
console.log(num);
}
// 调用函数(使用函数)
sum();
sum();
sum();
</script>
(2) 对象中的方法
定义在对象中的函数就是对象的方法
var person = {
name: '张三',
age: 100,
say: function() {
console.log(`他叫${person.username},他今天${person.age}岁`)
}
}
// 调用方法
person.say();
(3) 函数和变量声明提前
- 函数是"一等公民", 程序运行的时候, 不管函数定义在什么位置, 都会先执行声明, 所以在任何地方都可以调用函数.
- 变量也会一开始运行就声明, 等到代码运行到变量声明的那句代码才可以对其进行赋值
<script>
add();
console.log('str的值是',str);
function add() {
var num1 = 100;
var num2 = 20;
var sum = num1 + num2;
console.log(sum);
}
var str = '123456';
</script>
// 练习 练习 1. 写一个函数,实现 50 到 500 相加, 并输出到网页上 练习 2. 定义一个关于饮水机的对象,给它添加属性,添加方法(饮水的方法)并调用
(二)函数的调用方式
(2 )手动调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick="sum();">计算</button><br/>
<input type="text" onkeydown="sum();">
<script>
function sum() {
var count = 0;
for (var i=0;i<=100;i++) {
count += i;
}
console.log(count);
}
// 手动调用
sum();
</script>
</body>
</html>
(2) 绑定一个事件来调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h3>实现1-xxx相加的计算</h3>
<input class="inp" type="text" value="">
<button onclick="calculate();">计算</button>
<p>相加的结果是: <span id="total">0</span></p>
<script>
function calculate() {
// 获取输入的值
var $inp = document.querySelector('.inp');
var num = $inp.value;
// 累加
var sum = 0;
for (var i=0;i<=num;i++) {
sum += i;
}
// 显示到id为total的元素上
document.querySelector('#total').innerHTML = sum;
}
</script>
</body>
</html>
// 练习 练习 3. 需求: 从页面上输入两个加数,绑定事件,加上两个加数相加的结果,并显示在页面上
(三)函数传递参数
3.1 调用时传入的数据,跟函数的参数一一对应 3.2 基本数据类型和引用数据类型参数的区别
<script>
// num1是第一个加数
// num2是第二个加数
function add(num1,num2) {
console.log('num1=',num1);
console.log('num2=',num2);
var sum = num1 + num2;
console.log('两个数相加的结果是',sum);
}
add(15,25);
// 1到100累加
function cal(max) {
var sum = 0;
for(var i=1;i<=max;i++) {
sum += i;
}
console.log('累加的结果是',sum);
}
cal(10);
var num = 30;
cal(num);
</script>
(四)函数返回值
4.1 使用 return 返回计算的结果 4.2 没写 return,默认返回 undefined
<script>
// 需求: 计算两个数相加的结果,并返回给调用者
function add(num1, num2) {
var sum = num1 + num2;
return sum;
}
var sum = add(10,10);
// 把两个数相加的结果显示在页面上
function add2(num1, num2) {
var sum = num1 + num2;
// 没有return时,默认返回undefined
document.write(sum);
}
var sum2 = add2(20,30);
console.log(sum2);
</script>
// 练习 练习 4. 需求: 声明一个函数,实现 1 到任意数字累加的结果
(五)作用域
5.1 什么是作用域 5.2 window,全局作用域,在全局作用域下声明的变量是全局变量 5.3 局部作用域和局部变量 5.4 作用域访问规则
(1)函数内部可以访问函数外部的变量
(2)函数外部不可以访问函数内部的变量
(3)多个作用域用作用域链进行连接
(4)没有块级作用域(区分作用域以函数作为区分条件)
(1) 函数作用域
<script>
function test() {
var a = 100;
}
console.log(a);
</script>
(2) 作用域和变量
全局作用域和全局变量
局部作用域和局部变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="demo5-2.js"></script>
<script>
// 全局对象 window
console.log(window);
console.log(2222);
window.console.log(2222);
// 全局变量
var username = 'laohu';
console.log(username);
console.log(window.username);
</script>
</head>
<body>
</body>
</html>
(3) 没有块级作用域
区分全局和局部的标准是函数
<script>
for (var i=0;i<10;i++) {
console.log('发呆');
}
console.log(i);
</script>
(4) 作用域规则
<script>
var a = 100;
function cal() {
var b = 200;
function add() {
var b = 300;
var c = 300;
var sum = a + b + c;
return sum;
}
var result = add();
document.write(result);
}
cal();
</script>
作业:
- 使用函数的方式重写电影列表页面, 同时加上轮播图
- 编写一个计算器(eval 用来计算)